<template>
  <div class="simple-map-test">
    <div class="test-header">
      <h2>简单地图测试</h2>
      <button @click="loadMap" class="load-btn">加载地图</button>
      <button @click="clearMap" class="clear-btn">清除地图</button>
    </div>

    <div class="map-info">
      <p>地图状态: {{ mapStatus }}</p>
      <p>API状态: {{ apiStatus }}</p>
    </div>

    <!-- 地图容器 -->
    <div id="simple-map-container" class="map-container"></div>

    <div class="debug-info">
      <h3>调试信息</h3>
      <pre>{{ debugInfo }}</pre>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

// 响应式数据
const mapStatus = ref('未初始化')
const apiStatus = ref('未检查')
const debugInfo = ref('')
let map: any = null

// 百度地图API密钥
const AK = 'JejBYDSsA76GlOH5xNMJmAjXghFPbdYA'

// 添加调试信息
const addDebugInfo = (info: string) => {
  debugInfo.value += `[${new Date().toLocaleTimeString()}] ${info}\n`
  console.log(info)
}

// 检查API状态
const checkAPIStatus = () => {
  if (typeof (window as any).BMap !== 'undefined') {
    apiStatus.value = '已加载'
    addDebugInfo('百度地图API已加载')
    return true
  } else {
    apiStatus.value = '未加载'
    addDebugInfo('百度地图API未加载')
    return false
  }
}

// 加载百度地图API
const loadBaiduMapAPI = (): Promise<void> => {
  return new Promise((resolve, reject) => {
    if (checkAPIStatus()) {
      resolve()
      return
    }

    addDebugInfo('开始加载百度地图API...')
    
    // 创建全局回调函数
    const callbackName = 'initBaiduMap_' + Date.now()
    ;(window as any)[callbackName] = () => {
      addDebugInfo('百度地图API加载成功')
      apiStatus.value = '已加载'
      resolve()
      // 清理回调函数
      delete (window as any)[callbackName]
    }
    
    const script = document.createElement('script')
    script.src = `https://api.map.baidu.com/api?v=3.0&ak=${AK}&callback=${callbackName}`
    script.onerror = (error) => {
      addDebugInfo(`百度地图API加载失败: ${error}`)
      apiStatus.value = '加载失败'
      reject(error)
    }
    
    document.head.appendChild(script)
  })
}

// 加载地图
const loadMap = async () => {
  try {
    addDebugInfo('开始加载地图...')
    mapStatus.value = '加载中...'
    
    // 检查地图容器
    const mapContainer = document.getElementById('simple-map-container')
    if (!mapContainer) {
      addDebugInfo('错误: 地图容器不存在')
      mapStatus.value = '容器不存在'
      return
    }
    
    // 加载API
    await loadBaiduMapAPI()
    
    const BMap = (window as any).BMap
    if (!BMap) {
      addDebugInfo('错误: 百度地图API加载失败')
      mapStatus.value = 'API加载失败'
      return
    }
    
    addDebugInfo('创建地图实例...')
    
    // 创建地图实例
    map = new BMap.Map('simple-map-container')
    
    // 设置地图中心点（默认北京）
    const point = new BMap.Point(116.404, 39.915)
    map.centerAndZoom(point, 12)
    
    addDebugInfo('地图创建成功')
    mapStatus.value = '已加载'
    
    // 添加地图控件
    map.addControl(new BMap.NavigationControl())
    map.addControl(new BMap.ScaleControl())
    
    addDebugInfo('地图控件添加完成')
    
  } catch (error) {
    addDebugInfo(`地图加载失败: ${error}`)
    mapStatus.value = '加载失败'
  }
}

// 清除地图
const clearMap = () => {
  if (map) {
    map.destroy()
    map = null
    mapStatus.value = '已清除'
    addDebugInfo('地图已清除')
  }
}

onMounted(() => {
  addDebugInfo('组件已挂载')
  checkAPIStatus()
})
</script>

<style scoped>
.simple-map-test {
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.test-header {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 20px;
}

.test-header h2 {
  margin: 0;
  color: #333;
}

.load-btn,
.clear-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.load-btn {
  background: #1890ff;
  color: white;
}

.load-btn:hover {
  background: #40a9ff;
}

.clear-btn {
  background: #ff4d4f;
  color: white;
}

.clear-btn:hover {
  background: #ff7875;
}

.map-info {
  background: #f0f0f0;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.map-info p {
  margin: 5px 0;
  font-size: 14px;
}

.map-container {
  height: 400px;
  border: 2px solid #ddd;
  border-radius: 4px;
  margin-bottom: 20px;
  background: #f9f9f9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
}

.debug-info {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 4px;
  border: 1px solid #ddd;
}

.debug-info h3 {
  margin: 0 0 10px 0;
  color: #333;
}

.debug-info pre {
  margin: 0;
  font-size: 12px;
  color: #666;
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 200px;
  overflow-y: auto;
}
</style>

